import React, { useEffect, useState } from 'react';
import { Divider, Popover, Steps, Table } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { MsgType, showMsg } from '@/utils/utils';
import { updateOrderStatus } from '@/services/shop/api';
import PopoverContent from '@/components/PopoverContent/Index'

const OrderInfo: React.FC<any> = (props) => {
  const { detail } = props
  const [list, setList] = useState<any[]>([])

  const columns: ProColumns<any>[] = [
    {
      title: '订单编号',
      width: 120,
      dataIndex: 'order_id'
    },
    {
      title: '支付单号',
      width: 120,
      dataIndex: 'settle_no'
    },
    {
      title: '用户账号',
      dataIndex: 'user_name'
    },
    {
      title: '订单金额',
      align: 'right',
      valueType: 'money',
      dataIndex: 'order_price'
    },
    {
      title: '支付金额',
      align: 'right',
      valueType: 'money',
      dataIndex: 'pay_price',
      render: (val, record) => {
        return ['T', 'C'].includes(record.order_status) ? '￥0.00' : `￥${record.order_price}`;
      }
    },
    {
      title: '支付方式',
      dataIndex: 'pay_method',
      renderText: () => {
        return '微信支付'
      }
    },
    {
      title: '配送方式',
      dataIndex: 'ship_method',
      valueType: 'select',
      valueEnum: {
        K: '快递',
        Z: '自提',
        Y: '院内配送'
      }
    },
    {
      title: '订单状态',
      dataIndex: 'order_status',
      valueType: 'select',
      valueEnum: {
        T: '待付款',
        P: '待发货',
        S: '已发货',
        F: '已完成',
        C: '已关闭',
        R: '已退款',
        G: '已退货',
      }
    }
  ];

  useEffect(() => {
    if (detail.order_id) {
      const item = {
        user_order_id: detail.user_order_id,
        order_id: detail.order_id,
        settle_no: detail.settle_no,
        user_name: detail.user_name,
        order_price: detail.order_price,
        pay_price: detail.pay_price,
        pay_method: detail.pay_method,
        ship_method: detail.ship_method,
        order_status: detail.order_status
      }
      setList([item])
    }
  }, [detail])

  return <div className="service-record">
      <div className="header">
        <div className="title">2. 订单基本信息</div>
      </div>

      <Divider style={{margin: '10px 0 0'}} />

      <ProTable
        search={false}
        rowKey="order_id"
        bordered
        options={false}
        dataSource={list}
        columns={columns} 
        pagination={false}
        summary={pageData => {
          let remarks = ''
          pageData.forEach(item => {
            remarks = item.remarks
          })
          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell index={1}>订单备注</Table.Summary.Cell>
                <Table.Summary.Cell colSpan={8} index={2}>{remarks}</Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          )
        }} 
        />
  </div>
}
export default OrderInfo;